{% extends 'base.html' %}

{% block title %}{{ '编辑项目' if project else '添加项目' }} - 项目管理系统{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('project.list_projects') }}" class="text-gray-500 hover:text-gray-700">项目管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">{{ '编辑项目' if project else '添加项目' }}</li>
        </ol>
    </nav>

    <!-- 表单卡片 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-5 sm:p-6">
            <form method="POST" class="space-y-6">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <!-- 基本信息行 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <!-- 项目名称 -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">项目名称 <span class="text-red-500">*</span></label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            value="{{ request.form.name or project.name if project else '' }}" 
                            required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                    
                    <!-- 负责人 -->
                    <div>
                        <label for="manager_id" class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                        <select 
                            id="manager_id" 
                            name="manager_id" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="">请选择负责人</option>
                            {% for user in users %}
                            <option 
                                value="{{ user.id }}" 
                                {% if (project and project.manager_id == user.id) or 
                                      (request.form.manager_id and request.form.manager_id == user.id) %}
                                selected
                                {% endif %}
                            >
                                {{ user.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- 销售负责人 -->
                    <div>
                        <label for="sales_manager_id" class="block text-sm font-medium text-gray-700 mb-1">销售负责人</label>
                        <select 
                            id="sales_manager_id" 
                            name="sales_manager_id" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="">请选择销售负责人</option>
                            {% for user in users %}
                            <option 
                                value="{{ user.id }}" 
                                {% if (project and project.sales_manager_id == user.id) or 
                                      (request.form.sales_manager_id and request.form.sales_manager_id == user.id) %}
                                selected
                                {% endif %}
                            >
                                {{ user.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- 关联客户 -->
                    <div>
                        <label for="customer_id" class="block text-sm font-medium text-gray-700 mb-1">关联客户</label>
                        <select 
                            id="customer_id" 
                            name="customer_id" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="">请选择客户</option>
                            {% for customer in customers %}
                            <option 
                                value="{{ customer.id }}" 
                                {% if (project and project.customer_id == customer.id) or 
                                      (request.form.customer_id and request.form.customer_id == customer.id) or
                                      (not project and preselected_customer and preselected_customer.id == customer.id) %}
                                selected
                                {% endif %}
                            >
                                {{ customer.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- 日期行 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 开始日期 -->
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                        <input 
                            type="date" 
                            id="start_date" 
                            name="start_date" 
                            value="{{ request.form.start_date or project.start_date.strftime('%Y-%m-%d') if project and project.start_date else '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                    
                    <!-- 结束日期 -->
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                        <input 
                            type="date" 
                            id="end_date" 
                            name="end_date" 
                            value="{{ request.form.end_date or project.end_date.strftime('%Y-%m-%d') if project and project.end_date else '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                </div>

                <!-- 状态和进度行 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 状态 -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select 
                            id="status" 
                            name="status" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="未开始" {% if project and project.status == '未开始' %}selected{% endif %}>未开始</option>
                            <option value="进行中" {% if project and project.status == '进行中' %}selected{% endif %}>进行中</option>
                            <option value="已完成" {% if project and project.status == '已完成' %}selected{% endif %}>已完成</option>
                            <option value="已延期" {% if project and project.status == '已延期' %}selected{% endif %}>已延期</option>
                        </select>
                    </div>
                    
                    <!-- 进度 -->
                    <div>
                        <label for="progress" class="block text-sm font-medium text-gray-700 mb-1">进度 (%)</label>
                        <input 
                            type="number" 
                            id="progress" 
                            name="progress" 
                            min="0" 
                            max="100" 
                            value="{{ request.form.progress or project.progress if project else 0 }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                    
                    <!-- 项目编号 -->
                    <div>
                        <label for="project_number" class="block text-sm font-medium text-gray-700 mb-1">项目编号</label>
                        <input 
                            type="text" 
                            id="project_number" 
                            name="project_number" 
                            value="{{ request.form.project_number or project.project_number if project else '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                </div>

                <!-- 类型和来源行 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 项目类型 -->
                    <div>
                        <label for="project_type" class="block text-sm font-medium text-gray-700 mb-1">项目类型</label>
                        <select 
                            id="project_type" 
                            name="project_type" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="产品研发" {% if project and project.project_type == '产品研发' %}selected{% endif %}>产品研发</option>
                            <option value="技术改进" {% if project and project.project_type == '技术改进' %}selected{% endif %}>技术改进</option>
                            <option value="系统升级" {% if project and project.project_type == '系统升级' %}selected{% endif %}>系统升级</option>
                            <option value="其他" {% if project and project.project_type == '其他' %}selected{% endif %}>其他</option>
                        </select>
                    </div>
                    
                    <!-- 项目来源 -->
                    <div>
                        <label for="project_source" class="block text-sm font-medium text-gray-700 mb-1">项目来源</label>
                        <select 
                            id="project_source" 
                            name="project_source" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="公开招标" {% if project and project.project_source == '公开招标' %}selected{% endif %}>公开招标</option>
                            <option value="客户委托" {% if project and project.project_source == '客户委托' %}selected{% endif %}>客户委托</option>
                            <option value="内部需求" {% if project and project.project_source == '内部需求' %}selected{% endif %}>内部需求</option>
                            <option value="其他" {% if project and project.project_source == '其他' %}selected{% endif %}>其他</option>
                        </select>
                    </div>
                </div>

                <!-- 项目描述 -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">项目描述</label>
                    <textarea 
                        id="description" 
                        name="description" 
                        rows="4" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >{{ request.form.description or project.description if project else '' }}</textarea>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3">
                    <a 
                        href="{{ url_for('project.list_projects') }}" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        取消
                    </a>
                    <button 
                        type="submit" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        <i class="fas fa-save mr-2"></i> {{ '保存项目' if project else '创建项目' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}